<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Note</title>
</head>
<body>
<!-- 1:输出 -->
    <h2>学习js：1、输出</h2>
    <!-- 注：javascript不包含任何打印或输出的函数 -->
      <!-- 1.1弹出警告框 -->
      <button id="learnjs_1_1" onclick="ljs_1_1()">弹出警告框</button>
      <script>
        function ljs_1_1(){
            window.alert(5+6);
        }
      </script>

      <!--  1.2操作HTML元素  -->
        <!-- 使用 document.getElementById(id) 方法找到元素。
             使用 "id" 属性来标识 HTML 元素，并 innerHTML 来插入元素内容 -->
        <button id="learnjs_1_2" onclick="ljs_1_2()">点击修改文字</button>
        <script>
            function ljs_1_2(){
                var  learnjs_1_2_buttontext = document.getElementById("learnjs_1_2");
                if (learnjs_1_2_buttontext = "点击修改文字"){
                    document.getElementById("learnjs_1_2").innerHTML="修改完成";
                }
            }
        </script>

        <!-- 1.3直接写入文档内容 -->
         <!-- 在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖 -->
         <button id="learnjs_1_3" onclick="ljs_1_3()">将日期信息覆盖当前页面</button>
         <script>
            function ljs_1_3(){
                 document.write(new Date());
            }
         </script>
         <!-- 而通过操作文档流，可以解决覆盖页面的问题 -->
         <button onclick="ljs_1_3_1()">打开文档流》添加内容〉关闭文档流</button>
         <script>
         function ljs_1_3_1()
         {
             var txt1 = "This is a new window.";
             var txt2 = "This is a test.";
             document.open("text/html","replace");//加上
             document.writeln(txt1);
             document.write(txt2);
             document.close();//加上
         }
        </script>
        <!-- 该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。
         如果您使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。
         document.write() 不会隐式调用 document.close() 方法的，否则例 2 中将不会有 This is a new window. 内容了。
        一旦调用了close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
        在载入页面后，浏览器输出流自动关闭。

        在此之后，比如延迟脚本 [setTimeout()] 或是 onload 执行的方法，
        任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。 -->

         <!-- 1.4 写入控制台 -->
          <!-- 点击f12进入浏览器开发者选项 -->
           <button id="learnjs_1_4" onclick="ljs_1_4()">控制台输出</button>
           <script>
               function ljs_1_4(){
                    a=2;b=3;c=a+b;
                   console.log("当前日期为" + new Date() + c);
               }
           </script>
           <!--  相比alert弹出后页面死亡，console输出后页面可以继续使用；同时console更适应结构化  -->
            <!-- console支持美化输出（添加样式），比如： -->
              <button id="learnjs_1_5" onclick="ljs_1_4_1()">美化的console.log</button>
              <script>
                  function ljs_1_4_1(){
                      console.log("%cHello World", "color:red;font-size:30px");
                  }
              </script>
            <!--  console也支持用%s等来表示变量，就像c语言那样  -->
            <button id="learnjs_1_4_2" onclick="ljs_1_4_2()" >输出到控制台</button>
            <script>
                function ljs_1_4_2(){
                    var hello = 'hello';
                    var one = 1;
                    console.log('%s world', hello)
                    console.log('%d + 1 = 2', one)
                }
            </script>
            
<!--  2、语法 -->
    <h2>2、语法</h2>
    <!-- 2.1 字面量-->
     <button onclick="ljs_2_1()" >将支持的字面量输出到控制台</button>
     <script>
         function ljs_2_1(){
            // %s 字符串
            console.log('%s', 'hello world')
            // %d 数字
            console.log('%d', 12e5)//输出为1200000,即12*10^5
                // %i 整数
                console.log('%i', 4.5)//输出为4
                // %f 浮点数
                console.log('%f', 1.35)//输出为1.35
            // %c 带有样式的字符串
            console.log('%c%s', 'color:red', 'hello world')
            // %o 对象
            console.log('%o', {name:'zhangsan', age:18})
            
            //数组
            //高级教程：【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array】
            const fruits = [];
            fruits.push("banana", "apple", "peach");
            console.log("总共有"+fruits.length+"种水果"); // 输出为3（此处输出的是数组长度）
            for (let i = 0; i < fruits.length; i++) {
                var num = i + 1;//注意数组从0开始计数，展示给用户时需要+1。
                console.log("第"+ num +"个水果是"+fruits[i]);
            }
         }
     </script>
     <!-- 2.2 变量 -->
      <button onclick="ljs_2_2()">输出计算结果到控制台</button>
      <script>
         function ljs_2_2(){
             var a = 1;//var用于定义变量，同时使用等号来为变量赋值
             var b = 2;
             console.log("a="+a+",b="+b);

             var c = a + b;
             var d = a - b;
             var e = a * b;
             var f = a / b;
             var g = a % b;
             console.log("a+b="+c);//JavaScript使用算术运算符计算,使用赋值运算符给变量赋值
             console.log("a-b="+d);
             console.log("a*b="+e);
             console.log("a/b="+f);
             console.log("a%b="+g);

             //除此之外js还存在 条件，比较及逻辑运算符	==  != <  >  它们用于在 JS 比较运算符中描述

             //注释：使用双斜杠，注释中的语句不予执行。
             //console.log("我不会执行");

            //关于数据类型

            var x = 16;                                  // Number 通过数字字面量赋值 
            var points = x * 10;                              // Number 通过表达式字面量赋值
            var lastName = "Johnson";                         // String 通过字符串字面量赋值
            var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
            var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
         }
     </script>
     <!-- 2.2.1 大小写敏感-->
      <!-- 注意：javascript对大小写是敏感的。比如getElementById()与getElementByID()是不同的 -->
       <!-- 同时，变量名myVar和myvar不是同一个变量。 -->
        <button onclick="ljs_2_2_1_myFunction()">点击一下</button>
        <script>
            // 由于javascript的大小写敏感，所以只会输出Hello World。
            function ljs_2_2_1_myFunction() {
                var myVar = "Hello World";
                var myvar = "Goodbye World";
                console.log(myVar);
            }
            function ljs_2_2_1_myfunction() {
                var myVar = "Good World";
                var myvar = "Bad World";
                console.log(myVar);
            }
        </script>

    <!-- 2.2.2 typeof的小缺陷 -->
         <!--   有个情况需要特别注意: typeof 不能用来判断是 Array 还是Object
                var arr = [] typeof(arr) === 'object' // true
                结果为 true。
                当然你可以使用其他方式来判断： -->
                <button onclick="ljs_2_2_2()">是数组吗</button>
                <script>
                function ljs_2_2_2(){
                    var cars=new Array();
                    cars[0]="Saab";
                    cars[1]="Volvo";
                    cars[2]="BMW";

                    if (Array.isArray) {
                        if(Array.isArray(cars)) {
                            console.log("isArray方法认为这是数组");
                        }
                    }
                    if (cars instanceof Array) {
                            console.log("instanceof方法认为这是数组");
                    }
                }
                </script>

    <!-- 2.2.3 关于开发规范 -->
        <!-- 关于命名 -->
         <script>
        /*
        1.匈牙利命名方式：变量名+对象描述 整数i 浮点fl 布尔b 字符串s 数组a 对象o 函数fn 正则re 例：iAge = 18;
        2.驼峰命名：
            （1）全部小写：单词与单词间全部用下划线分割
            （2）大小写混合：每个单词的第一个字母大写,例：jsBiJi 
        */
       //这里顺便介绍了js的注释，有行注释和块注释两种。
         </script>

    <!-- 2.2.4 一条语句也可以定义多个变量 -->
     <button onclick="ljs_2_2_4()">输出多个变量</button>
        <script>
            function ljs_2_2_4(){
            var iAge = 18,
                sName = 'js',
                bIsTrue = true,
                undefinedValue;//未使用值来声明的变量，其值实际上是undefined。
            console.log(iAge,sName,bIsTrue,undefinedValue);
            }
        </script>

    <!-- 2.2.5 ES6:使用let和const声明变量 -->
        <button onclick="ljs_2_2_5()">ES6:使用let和const声明变量</button>
        <script>
            function ljs_2_2_5(){
                let head = 'hello';//定义限定范围内作用域的变量
                const foot = 'world';//定义一个常量
                console.log(head,foot);
            }
        </script>

<!-- 3、数据类型 -->
 <h2>3 : 数据类型</h2>
    <!-- 值类型（基本类型）：字符串（String）、数值（Number）、布尔值（Boolean）、空（null）、未定义（undefined）、Symbol -->
    <!-- 其中Symbol 是 ES6 新增的类型，它表示一个唯一的值，一般用于对象属性的键 -->
    <!-- 引用数据类型（对象类型）：对象（Object）、数组（Array）、函数（Function） -->
    <!-- 特殊的对象：正则表达式（RegExp）、日期（Date） -->
     
    <!-- 3.1 javascript拥有动态类型 -->
     <script>
        var ljs_3_1;//此时ljs_3_1为undefined类型
        ljs_3_1 = 1;//此时ljs_3_1为Number类型
        ljs_3_1 = 'hello';//此时ljs_3_1为String类型
        ljs_3_1 = true;//此时ljs_3_1为Boolean类型
        ljs_3_1 = null;//此时ljs_3_1为null类型
    </script>
    <!-- 变量的数据类型可以通过typeof操作符来查看 -->
     <button onclick="ljs_3_1_1()">查看变量的数据类型</button>
     <script>
        var ljs_3_1_1_1 = typeof "string";
        var ljs_3_1_1_2 = typeof 123;
        var ljs_3_1_1_3 = typeof true;
        var ljs_3_1_1_4 = typeof null;

        function ljs_3_1_1(){
            console.log(ljs_3_1_1_1);//string
            console.log(ljs_3_1_1_2);//number
            console.log(ljs_3_1_1_3);//boolean
            console.log(ljs_3_1_1_4);//object
        }
     </script>
    <!-- 3.2 数据类型的表示 -->
     <button onclick="ljs_3_2()">数据类型的表示</button>
     <script>
        function ljs_3_2(){
            // 字符串
            var ljs_3_2_1 = "有个问题：";//双引号 表示变量为字符
            var ljs_3_2_2 = '是谁干的？';//单引号 也可以表示变量为字符
            var ljs_3_2_3 = "他说：'那不是我干的'。"//双引号里可以包着单引号
            var ljs_3_2_4 = '他说:"也不是我干的"。';//单引号里可以包着双引号
            var ljs_3_2_5 = '又有人说：\'难道是我干的吗\'？';//单引号里可以包着单引号，只需在单引号前加反斜杠
            var ljs_3_2_6 = "还有人说：\"我不知道是谁干的\"。"//双引号里可以包着双引号，只需在双引号前加反斜杠
            console.log("字符串输出如下：");
            console.log(ljs_3_2_1+ljs_3_2_2+ljs_3_2_3+ljs_3_2_4+ljs_3_2_5+ljs_3_2_6);//上述字符串均可正常输出
            console.log(" ");

            //数字
            var ljs_3_2_7 = 123;
            var ljs_3_2_8 = 123.00;//小数点可带可不带，输出均为123

            var ljs_3_2_9 = 123e5;
            var ljs_3_2_10 = 123e-5;//极大或极小的数字可以用科学（指数）计数来表示
            console.log("数字输出如下：");
            console.log(ljs_3_2_7+" "+ljs_3_2_8+" "+ljs_3_2_9+" "+ljs_3_2_10);
            console.log(" ");

            //对象
            var ljs_3_2_11 = {
                name:"js",
                age:18,
                sex:"男"
            };
            console.log("对象输出如下：");
            console.log(ljs_3_2_11.age);//输出对象属性,共有两种寻址方式
            console.log(ljs_3_2_11["age"]);
            console.log(" ");

            //声明变量属性：您可以使用关键词new来对新变量声明其类型
            var ljs_3_2_12 = new String("js");
            var ljs_3_2_13 = new Number(18);
            var ljs_3_2_14 = new Boolean(true);
            var ljs_3_2_15 = new Object({name:"js",age:18,sex:"男"});//输出 [object Object]
            var ljs_3_2_16 = new Array("js","18","男");
            var ljs_3_2_17 = new Function();
            console.log("声明变量属性如下：");
            console.log(ljs_3_2_12+"    "+ljs_3_2_13+"    "+ljs_3_2_14+"    "+ljs_3_2_15+"    "+ljs_3_2_16+"    "+ljs_3_2_17);
            console.log(" ");
        }
     </script>
<!-- 4、函数 -->
     <h2>4 : 函数</h2>
     <button onclick="ljs_4_0_1('bro','m',3)">调用带参数的函数 1</button>
     <button onclick="ljs_4_0_1('laotie','niubi',666)">调用带参数的函数 2</button>
     <script>
        function ljs_4_0_1(text1,text2,num){//接受3个参数
            console.log(text1+' '+text2+num);//输出bro m3或laotie niubi666。
                                             //因为函数是灵活的，使用不同的参数调用函数，输出结果也会不同
        }
     </script>
     
     <button onclick="ljs_4_0_3()">调用有返回值的函数</button>
     <button onclick="ljs_4_0_4(1,2)">使用1、2调用【ljs_4_4】函数</button>
     <button onclick="ljs_4_0_4(2,1)">使用2、1调用【ljs_4_4】函数</button>

     <script>
        function ljs_4_0_2(){
            var ljs_4_0_2_1 = 666
            return ljs_4_0_2_1;
        }
        function ljs_4_0_3(){
            var result = ljs_4_0_2();//调用函数并把返回值赋值给result
            console.log(result);
        }

        function ljs_4_0_4(a,b){
            var x;
            if(a>b){
                console.log('a大于b');
                return;//仅仅希望退出函数时可以使用return语句，返回值可选。
                console.log('return已完成。');//输出return后的代码将不会被执行。
            }
            x=a+b;//如本代码，当a大于b时，上面的代码将退出函数，并不会计算总和。
            console.log(x);
        }
     </script>

     <!-- 4.1 关于变量的生命周期 -->

     <!-- javascript 变量的生命周期： -->
      <script>
        var ljs_4_1_1 = 666;//全局变量，声明时开始，函数运行后死亡
        function ljs_4_1_2(){
            var ljs_4_1_2_1 = 666;//局部变量，声明时开始，页面关闭后死亡
        }
        ljs_4_1_2();
      </script>

      <!-- 4.2 关于未声明的变量分配值 -->

      <!-- 将值赋给未声明的变量，这个变量将被自动作为window的一个属性 -->
      <div style="background-color: black;">
        <h3 style="color: white;">尝试将未声明变量的值打印到当前的div容器中</h3>
        <button onclick="ljs_4_2_3()">尝试定义var3【没有var声明的属性】</button>
        <button onclick="ljs_4_2_1()">尝试删除var1【没有var声明的属性】</button>
        <button onclick="ljs_4_2_2()">尝试删除var2【不可配置全局属性】</button>
        

        <h4 style="color: aqua;">结果 :</h4><p id="ljs_4_2_show" style="color: white;"></p>
      </div>
      <script>
        ljs_4_2_1_1 = 666;//var1:未声明变量，自动分配给window
        var ljs_4_2_1_2 = 666;//var2:不可配置全局属性
        ljs_4_2_1_3 = "";//var3:未声明变量，自动分配给window
        ljs_4_2_update();//更新显示

        function ljs_4_2_1(){
            delete ljs_4_2_1_1;//删除var1。执行后在控制台可以看到报错：变量未定义
            ljs_4_2_update();//更新显示【控制台报错】
        }

        function ljs_4_2_2(){
            delete ljs_4_2_1_2;//删除var2，可以被删除
            ljs_4_2_update();//更新显示【实际上不会更新，因为值已被删除】
        }

        function ljs_4_2_3(){
            ljs_4_2_1_3 = 666;//定义var3:未声明变量，自动分配给window
            ljs_4_2_update();//更新显示【】var3变为666
        }

        function ljs_4_2_update(){//更新显示方法
            document.getElementById("ljs_4_2_show").innerHTML ="var 1:" +ljs_4_2_1_1+" var 2:"+ljs_4_2_1_2+" var 3:"+ljs_4_2_1_3;
        }
       
      </script>
    <!-- 补充：4.2 关于作用域 -->
    <!-- <script src="./js/4_2:关于作用域.js"></script> -->

    <!-- 5 : javascript事件 -->
     <h2>5 : javascript事件</h2>
     <div style="border:3px solid black;">

     <button onclick="getElementById('ljs_5_0_showdate').innerHTML='现在时间是：'+Date()">点击添加html元素:现在几点了？</button>
     <!-- 在button标签中直接添加onclick属性并添加代码 -->

     <p id="ljs_5_0_showdate">现在时间是：没人问我。</p>
    <!-- 这里的内容将被更新 -->

     <button onclick="this.innerHTML='现在时间是：'+Date()">现在时间是：也没人问我。</button>
     <!-- 同时也可以使用this来修改自身属性，此处使用innerhtml。 -->

     <button onclick="ljs_5_0_displayDate()">现在时间是：也可以问我</button>
     <script>
       function ljs_5_0_displayDate(){
            document.getElementById("ljs_5_0_showdate").innerHTML="现在时间是："+Date();
        }
     </script>
    <!-- 通常使用上述方法，调用事件属性。 -->
     <!-- 当然，javascript可以控制更多html事件，详见https://www.runoob.com/jsref/dom-obj-event.html -->

    </div>

    <!-- 6：字符串 -->
     <h2>6 : 字符串</h2>
    
     <!-- script 3.2中已经介绍了单双引号的使用细节，此处不再赘述。 -->
      <div style="border:3px solid black;">
        <p>你可以使用索引位置来访问字符串。</p>
        <button onclick="ljs_6_0_1()" id="learnjs_6_1">告诉你这行字的第五个字是什么</button>
        <script>
            const ljs_6_0_1_1 = document.getElementById("learnjs_6_1");
            function ljs_6_0_1(){
                alert(ljs_6_0_1_1.innerHTML[4]);//索引值从0开始，这意味着第五个字的索引值应为4.
            }
        </script>

        <p>你可以使用length属性来获取字符串的长度。</p>
        <button onclick="ljs_6_0_2()" id="learnjs_6_2">这行字只有8个字</button>
        <script>
            const ljs_6_0_2_1 = document.getElementById("learnjs_6_2");
            function ljs_6_0_2(){
                alert('都说了有'+ljs_6_0_2_1.innerHTML.length+'个字，你还不信');//获取字符串长度
            }
        </script>

        <p>字符串也可以使用索引位置来修改。</p>
        <button onclick="ljs_6_0_3()" id="learnjs_6_3">修改这列字</button>
        <script>
            const ljs_6_0_3_1 = document.getElementById("learnjs_6_3");
            function ljs_6_0_3(){
                ljs_6_0_3_1.innerHTML = ljs_6_0_3_1.innerHTML.replace('列','行');//使用replace方法来修改某个字
            }
        </script>
      </div>

      <p>对于特殊字符</p>
      <!-- javascript中，可以使用反斜杠来转义特殊字符。 -->
       <!-- 常用的特殊字符如下：\' 单引号 \" 双引号 \n 换行 \r 回车 \t 制表符tab \b 退格符 \f 换页符 \\ 反斜杠" -->

       <!-- 字符串可以是对象。但是不建议创建，它不仅会拖慢执行速度，还可能产生其他副作用 -->
        <button onclick="ljs_6_1_3()">
            <p style="color: rgb(255, 166, 0);">new String('hello world')</p>和<p style="color: rgb(255, 166, 0);"> 'hello world' 一样吗？</p>
        </button>

        <script>
            var ljs_6_1_1 = new String('hello world');//定义String对象
            var ljs_6_1_2 = 'hello world';//定义原始值字符串，它没有属性和方法，因为不是对象
            function ljs_6_1_3(){
                console.log(ljs_6_1_1 === ljs_6_1_2);
                //输出为false，因为x是字符串但y是对象。
                //此处的===为绝对相等，即数据类型和值必须完全相等。
            } 
        </script>

        <div style="border: 3px solid black;">
            <p id="learnjs_6_4"></p>
            <script>
                var ljs_6_4_string = '字符串具有一些属性，针对这句话，你可以先了解下面的三个属性';
                document.getElementById('learnjs_6_4').innerHTML = ljs_6_4_string;
            </script>
            
            <button onclick="ljs_6_4_constructor()">创建字符串属性的函数</button>
            <script>
                function ljs_6_4_constructor(){
                    console.log(ljs_6_4_string.constructor);
                }
            </script>

            <button onclick="console.log(ljs_6_4_string.length)">返回字符串长度</button>
            <!-- prototype 允许您向对象添加属性和方法-->

            <!-- 6.5 字符串方法 可以使用下面提供的工具来尝试这些方法，更多方法实例详见https://www.runoob.com/jsref/jsref-obj-string.html -->
<div style="border: 3px solid black;">
    <h3>字符串方法操作</h3>
    <p>输入字符串: <input type="text" id="ljs_6_5" value="Hello, World!"></p>
    <p>选择方法:
        <select id="stringMethodSelect">
            <option value="charAt">charAt() - 返回指定索引位置的字符</option>
            <option value="charCodeAt">charCodeAt() - 返回指定索引位置字符的 Unicode 值</option>
            <option value="concat">concat() - 连接两个或多个字符串，返回连接后的字符串</option>
            <option value="fromCharCode">fromCharCode() - 将 Unicode 转换为字符串</option>
            <option value="indexOf">indexOf() - 返回字符串中检索指定字符第一次出现的位置</option>
            <option value="lastIndexOf">lastIndexOf() - 返回字符串中检索指定字符最后一次出现的位置</option>
            <option value="localeCompare">localeCompare() - 用本地特定的顺序来比较两个字符串</option>
            <option value="match">match() - 找到一个或多个正则表达式的匹配</option>
            <option value="replace">replace() - 替换与正则表达式匹配的子串</option>
            <option value="search">search() - 检索与正则表达式相匹配的值</option>
            <option value="slice">slice() - 提取字符串的片断，并在新的字符串中返回被提取的部分</option>
            <option value="split">split() - 把字符串分割为子字符串数组</option>
            <option value="substr">substr() - 从起始索引号提取字符串中指定数目的字符</option>
            <option value="substring">substring() - 提取字符串中两个指定的索引号之间的字符</option>
            <option value="toLocaleLowerCase">toLocaleLowerCase() - 根据主机的语言环境把字符串转换为小写</option>
            <option value="toLocaleUpperCase">toLocaleUpperCase() - 根据主机的语言环境把字符串转换为大写</option>
            <option value="toLowerCase">toLowerCase() - 把字符串转换为小写</option>
            <option value="toString">toString() - 返回字符串对象值</option>
            <option value="toUpperCase">toUpperCase() - 把字符串转换为大写</option>
            <option value="trim">trim() - 移除字符串首尾空白</option>
            <option value="valueOf">valueOf() - 返回某个字符串对象的原始值</option>
        </select>
    </p>
    <p>参数: <input type="text" id="methodParams"></p>
    <button onclick="executeStringMethod()">执行方法</button>
    <p>结果: <span id="methodResult"></span></p>
</div>

<script>
    function executeStringMethod() {
        const ljs_6_5 = document.getElementById('ljs_6_5').value;
        const method = document.getElementById('stringMethodSelect').value;
        const params = document.getElementById('methodParams').value;
        let result;

        try {
            switch (method) {
                case 'charAt':
                    result = ljs_6_5.charAt(parseInt(params));
                    break;
                case 'charCodeAt':
                    result = ljs_6_5.charCodeAt(parseInt(params));
                    break;
                case 'concat':
                    result = ljs_6_5.concat(params);
                    break;
                case 'fromCharCode':
                    result = String.fromCharCode(parseInt(params));
                    break;
                case 'indexOf':
                    result = ljs_6_5.indexOf(params);
                    break;
                case 'lastIndexOf':
                    result = ljs_6_5.lastIndexOf(params);
                    break;
                case 'localeCompare':
                    result = ljs_6_5.localeCompare(params);
                    break;
                case 'match':
                    result = ljs_6_5.match(new RegExp(params));
                    break;
                case 'replace':
                    result = ljs_6_5.replace(new RegExp(params), '替换内容');
                    break;
                case 'search':
                    result = ljs_6_5.search(new RegExp(params));
                    break;
                case 'slice':
                    result = ljs_6_5.slice(parseInt(params));
                    break;
                case 'split':
                    result = ljs_6_5.split(params);
                    result = result.join(', '); // 将数组转换为字符串以便显示
                    break;
                case 'substr':
                    result = ljs_6_5.substr(parseInt(params));
                    break;
                case 'substring':
                    result = ljs_6_5.substring(parseInt(params));
                    break;
                case 'toLocaleLowerCase':
                    result = ljs_6_5.toLocaleLowerCase();
                    break;
                case 'toLocaleUpperCase':
                    result = ljs_6_5.toLocaleUpperCase();
                    break;
                case 'toLowerCase':
                    result = ljs_6_5.toLowerCase();
                    break;
                case 'toString':
                    result = ljs_6_5.toString();
                    break;
                case 'toUpperCase':
                    result = ljs_6_5.toUpperCase();
                    break;
                case 'trim':
                    result = ljs_6_5.trim();
                    break;
                case 'valueOf':
                    result = ljs_6_5.valueOf();
                    break;
                default:
                    result = '未知的方法';
            }
        } catch (e) {
            result = '执行错误: ' + e.message;
        }

        document.getElementById('methodResult').innerText = result;
    }
</script>
        </div>

        <!-- 7. 模板字符串 -->
         
        <!-- 
            模板字符串（Template Strings）是一个字符串字面量，它允许在字符串中嵌入表达式。
            在模板字符串中，可以使用反引号（`）来定义字符串，并且可以在其中嵌入表达式。
            表达式以${}的形式表示，其中包含要嵌入的字符串。
            
            以下是一个简单的示例：
        -->

        <button onclick="ljs_7_0_1()" >在控制台输出name</button>

        <script>
            const name = 'John';
            const greeting = `Hello, ${name}!`;
            
            function ljs_7_0_1(){
            console.log(greeting); // 输出：Hello, John!
            }
        </script>

        <!-- 其中：
            string text将成为模板字面量的一部分字符串文本，几乎允许所有字符，包括换行符和其他空白字符。
            但是除非使用了标签函数，否则无效的转义序列将导致语法错误。 

            expression表示要插入当前位置的表达式，其值被转换为字符串或传递给tagFunction。

            tagFunction 如果指定，将使用模板字符串数组和替换表达式调用它，返回值将成为模板字变量的值。
        -->
        
        <button onclick="ljs_7_0_2()">在控制台输出一段话</button>
        <script>
            let ljs_7_0_2_text = //本示例说明：模板字符串支持多行文本（无需使用特殊的转义字符），且支持同时使用单引号和双引号
            `
            他说："当'梦'醒过来的时候，
                  一切都将回到起点。"
                          他在做梦。
            `;

            function ljs_7_0_2(){
                console.log(ljs_7_0_2_text);
            }
        </script>

        <!-- 若要转义模板字面量中的反引号，需要在前面加一个反斜杠 -->

        <button onclick="ljs_7_0_3()" >`\``==="`"吗</button>

        <script>
            function ljs_7_0_3(){
                console.log(`\``==="`");//输出true。
            }
        </script>

        <!-- 
            除了普通字符串外，模板字面量还可以包含占位符：一种由美元符号和大括号分隔的嵌入式表达式 ${ expression} 
            字符串和占位符被传递给一个函数（要么是默认函数要么是自定义函数）。
            默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。
        -->
        <button onclick="ljs_7_0_4()">在控制台输出问题和答案</button>
        <script>
            const question = 'Why my life is so bad?';
            const answer = 'Because you always sleeping.';

            function ljs_7_0_4(){
                console.log(`
                Q: ${question} 
                A:${answer}
                
                Don't be lazy!
                `);
            }
        </script>

        <!-- 模板字符串也允许你在字符串中引用变量、执行函数调用和进行任意的javascript表达式 -->
         <button onclick="ljs_7_0_5()">在控制台输出：尝试在模板字符串使用表达式</button>
         <script>
            let coins_total = 213;
            let coins_per_pc = 4 ;
            function pc_per_song(people){
                switch (people) {
                    case 1:
                        return 3;
                    case 2:
                        return 4;
                }
            }

            let play_maimai = `
                你共拥有${coins_total}个硬币，
                每${coins_per_pc}枚硬币可以玩一局舞萌DX，
                共可以${(coins_total/coins_per_pc).toFixed(0)}次舞萌DX。
                普通模式单刷的话也就是${pc_per_song(1)*(coins_total/coins_per_pc).toFixed(0)}首歌，
                拼机可以玩${pc_per_song(2)*(coins_total/coins_per_pc).toFixed(0)}首歌。
                至于剩下的${coins_total%coins_per_pc}颗可以扔进推币机了。
                `;//注：上述事例使用了函数调用与变量引用。
            
            function ljs_7_0_5(){
                console.log(play_maimai);
            }

         </script>

         <!-- 模板字符串也可以当作html模板使用，实例如下 -->
          <div style="border: 3px solid black;">
          <button onclick="ljs_7_0_6()">在控制台输出：尝试html模板</button>
          <div id="ljs_7_0_6_div">点击后内容将在这里生成</div>
          <script>
            function ljs_7_0_6(){
                let name = 'h1标签';
                let age = 25;
                let html = `
                <div>
                    <h1>${name}</h1>
                    <p>${age}</p>
                </div>
                `;
                document.getElementById('ljs_7_0_6_div').innerHTML = html;
            }
          </script>
          </div>

        <!-- 8、关于运算符 -->
         <div style="border: 3px solid black;">
            <p>如果y=5，那么：</p>
            <button onclick="ljs_8_0_1()" >打印到控制台</button>
            <script>
                let y = 5;
                function ljs_8_0_1(){
                    console.log(`x=y+2   | x=${y+2} y=${y}`);
                    console.log(`x=y-2   | x=${y-2} y=${y}`);
                    console.log(`x=y*2   | x=${y*2} y=${y}`);
                    console.log(`x=y/2   | x=${y/2} y=${y}`);
                    console.log(`x=y%2   | x=${y%2} y=${y}`);
                    console.log(`x=y**2  | x=${y**2} y=${y}`);
                }
            </script>
            <p>x=y+2   | x=7 y=5</p>
            <p>x=y-2   | x=3 y=5</p>
            <p>x=y*2   | x=10 y=5</p>
            <p>x=y/2   | x=2.5 y=5</p>
            <p>x=y%2   | x=1 y=5</p>
            <p>x=y**2  | x=25 y=5</p>
            <!-- 自增/自减 -->
            <p>x=y++   | x=5 y=6</p>
            <p>x=++y   | x=6 y=6</p>
            <p>x=y--   | x=5 y=4</p>
            <p>x=--y   | x=4 y=4</p>
         </div>
        
         <!-- 8.1 +号可以用于连接字符串 -->
          <button id="ljs_8_1" onclick="ljs_8_1()" >点击修改文字</button>
          <script>
              let ljs_8_1_text = 'hello';
              function ljs_8_1(){
                  ljs_8_1_text += ' world';
                  document.getElementById('ljs_8_1').innerHTML = ljs_8_1_text;
              }
          </script>
            <!-- 数字相加得到和，数字与字符串相加返回字符串 -->
             <button id="ljs_8_1_1" onclick="ljs_8_1_1()" > 输出5+5和“5”+5和“hello”+5到控制台 </button>
             <script>
                 function ljs_8_1_1(){
                     console.log(5+5);//输出10
                     console.log('5'+5);//输出"55"
                     console.log('hello'+5);//输出"hello5"
                 }
             </script>

             <!-- 8.2 比较运算符 -->
             <div style="border: 3px solid black;">
                 <p>如果x=5，那么：</p>
                 <button onclick="ljs_8_2_1()" >打印到控制台</button>
                 <script>
                     let x = 5;
                     function ljs_8_2_1(){
                         console.log(`x>2   | ${x>2}`);//大于，输出true
                         console.log(`x>=2  | ${x>=2}`);//大于等于，输出true
                         console.log(`x<2   | ${x<2}`);//小于，输出false
                         console.log(`x<=2  | ${x<=2}`);//小于等于，输出false
                         console.log(`x==2  | ${x==2}`);//等于，输出false
                         console.log(`x!=2  | ${x!=2}`);//不等于，输出true
                         console.log(`x===2  | ${x===2}`);//严格等于，输出false
                         console.log(`x!==2  | ${x!==2}`);//严格不等于，输出true
                         console.log(`x=='5'  | ${x=='5'}`);//与字符串的`5`进行等于比较，输出true
                         console.log(`x==='5'  | ${x==='5'}`);//与字符串的`5`进行严格等于比较，输出false
                         console.log(`x!=='5'  | ${x!=='5'}`);//与字符串的`5`进行严格不等于比较，输出true
                     }
                 </script>
                 <!-- 可以运用的场景，如条件语句 -->
                  <button onclick="ljs_8_2_2(18)" >我可以进去吗？</button>
                  <script>
                      function ljs_8_2_2(age){
                         if(age>=18){
                             console.log('可以进去');
                         }else{
                             console.log('不可以进去');
                         }
                     }
                  </script>

                  <!-- 8.3 逻辑运算符 -->
                   <button onclick="check(1)">一号按钮</button>
                   <button onclick="check(2)">二号按钮</button>
                   <button onclick="check_logic()">检查逻辑</button>
                   <script>
                       var check_fir = false;
                       var check_sec = false;

                       function check(num){
                            switch(num){
                                case 1:
                                    check_fir = true;
                                    break;
                                case 2:
                                    check_sec = true;
                                    break;    
                            }
                       }

                       function check_logic(){
                           if(check_fir || check_sec){
                            //or运算符  其中一个条件正确即true
                            //太阳从东方升起 || 太阳从西方升起 true
                               console.log('其中一个按钮点过了');
                           }
                       
                          if(check_fir && check_sec){
                            //and运算符 需两个条件全部正确
                            //太阳从东方升起 && 太阳从西方升起 false
                            //太阳从东方升起 && 太阳从西边落下 true
                           console.log('两个按钮都点过了');
                          }
                          if(!check_fir && !check_sec){//not运算符
                           console.log('两个按钮都没有点过');
                          } 

                        }
                   </script>
             </div>
            



</body>
</html>